<template>
    <view class="apply-pages" v-if="isLoad">
        <!-- <back></back> -->
        <view
            class="page-height"
            v-if="
                (options.admin_id && coach_status != -1) ||
                (!options.admin_id && [1, 2, 3].includes(coach_status))
            "
        >
            <abnor
                percent="150%"
                @confirm="confirm"
                @cancel="$util.goUrl({ url: `/pages/mine`, openType: `reLaunch` })"
                :title="title[coach_status]"
                :tip="tipArr[coach_status]"
                :button="buttonArr[coach_status]"
                :image="image[coach_status]"
                :tipMax="coach_status == 4 ? '690rpx' : ''"
            ></abnor>
        </view>

        <block v-else>
            <view class="apply-info-box rel" :style="{ background: primaryColor }">
                <image class="bg-1 abs" src="https://lbqny.migugu.com/admin/anmo/apply/bg-1.png">
                </image>
                <image class="bg-2 abs" src="https://lbqny.migugu.com/admin/anmo/apply/bg-2.png">
                </image>
                <view class="technician-money flex-center f-md-title c-title text-bold abs">{{
                    max_level || 0
                }}</view>
                <image
                    class="join-us abs"
                    src="https://lbqny.migugu.com/admin/anmo/apply/join-us.png"
                >
                </image>
                <view class="join-us pd-lg abs" style="z-index: 3">
                    <view style="height: 90rpx"></view>
                    <view class="f-title c-title text-bold">您的姓名</view>
                    <input
                        v-model="form.coach_name"
                        type="text"
                        class="item-input fill-base f-mini-title c-title mt-sm pl-lg pr-lg radius-10"
                        maxlength="20"
                        placeholder-class="c-caption"
                        :placeholder="rule[0].errorMsg"
                        :style="{ borderColor: primaryColor }"
                    />
                    <view class="mt-md f-title c-title text-bold">您的性别</view>
                    <view class="flex-y-center mt-sm">
                        <view
                            @tap.stop="form.sex = index"
                            class="flex-y-center f-mini-title c-title"
                            :style="{
                                color: form.sex == index ? primaryColor : '',
                                marginRight: index === 0 ? '80rpx' : '',
                            }"
                            v-for="(item, index) in ['男', '女']"
                            :key="index"
                            ><i
                                class="iconfont mr-sm"
                                :class="[
                                    { 'icon-xuanze': form.sex != index },
                                    { 'icon-radio-fill': form.sex == index },
                                ]"
                            ></i
                            >{{ item }}
                        </view>
                    </view>
                    <view class="mt-md f-title c-title text-bold">您的生日</view>
                    <view
                        class="item-input fill-base text f-mini-title c-title mt-sm pl-lg pr-md radius-10"
                        :style="{ borderColor: primaryColor }"
                    >
                        <picker
                            @change="pickerChange($event, 'birthday')"
                            mode="date"
                            :end="endYear"
                            :value="form.birthday"
                        >
                            <view class="flex-between">
                                <view class="max-400 ellipsis">{{
                                    form.birthday || "请选择"
                                }}</view>
                                <i class="iconfont icon-right ml-sm" style="font-size: 28rpx"></i>
                            </view>
                        </picker>
                    </view>
                    <view class="mt-md f-title c-title text-bold">手机号</view>
                    <view
                        class="item-input fill-base f-mini-title c-title mt-sm pl-lg pr-lg radius-10"
                        style="height: auto; min-height: 82rpx"
                        :style="{ borderColor: primaryColor }"
                    >
                        <input
                            v-model="form.mobile"
                            type="text"
                            maxlength="11"
                            placeholder-class="c-caption"
                            :placeholder="rule[2].errorMsg"
                            style="margin-top: 15rpx"
                        />
                        <view class="flex-between" v-if="configInfo.short_code_status">
                            <input
                                v-model="form.short_code"
                                type="text"
                                maxlength="6"
                                placeholder-class="c-caption"
                                placeholder="请输入验证码"
                                :style="{ borderColor: primaryColor }"
                            />
                            <view @tap.stop="toSend" :style="{ color: primaryColor }">
                                {{ authTime > 0 ? `重新获取(${authTime}s)` : "获取验证码" }}
                            </view>
                        </view>
                    </view>
                    <view class="mt-md f-title c-title text-bold">意向工作城市</view>
                    <view
                        class="item-input fill-base text f-mini-title c-title mt-sm pl-lg pr-md radius-10"
                        :style="{ borderColor: primaryColor }"
                    >
                        <picker
                            @change="pickerChange($event, 'city')"
                            :value="cityIndex"
                            :range="cityList"
                            range-key="title"
                        >
                            <view class="flex-between">
                                <view class="max-400 ellipsis">{{
                                    cityIndex != -1 ? cityList[cityIndex].title : "请选择"
                                }}</view>
                                <i class="iconfont icon-right ml-sm" style="font-size: 28rpx"></i>
                            </view>
                        </picker>
                    </view>
                    <block v-if="configInfo.plugAuth.store && form.admin_id">
                        <view class="mt-md f-title c-title text-bold">挂靠门店</view>
                        <view
                            class="item-input fill-base text f-mini-title c-title mt-sm pl-lg pr-md radius-10"
                            :style="{ borderColor: primaryColor }"
                        >
                            <picker
                                @change="pickerChange($event, 'store')"
                                :value="storeIndex"
                                :range="storeList"
                                range-key="title"
                            >
                                <view class="flex-between">
                                    <view class="max-400 ellipsis"
                                        >{{
                                            storeIndex != -1
                                                ? storeList[storeIndex].title
                                                : "请选择"
                                        }}
                                    </view>
                                    <i
                                        class="iconfont icon-right ml-sm"
                                        style="font-size: 28rpx"
                                    ></i>
                                </view>
                            </picker>
                        </view>
                    </block>
                    <view class="flex-y-baseline mt-md">
                        <view class="f-title c-title text-bold">工作形象照</view>
                        <view class="f-caption c-caption ml-sm">图片建议尺寸: 750 * 750</view>
                    </view>
                    <view class="f-caption c-caption mt-sm"
                        >请上传本人近期照片，图片大小不超过10M</view
                    >
                    <view class="flex-between mt-sm">
                        <upload
                            @upload="imgUpload"
                            :imagelist="form.work_img"
                            imgtype="work_img"
                            text="上传图片"
                            :imgsize="1"
                            imgclass="apply"
                        >
                        </upload>
                    </view>
                </view>
                <view
                    class="flex-center f-caption c-title abs"
                    style="width: 100%; top: 1842rpx; left: 0"
                >
                    平台不会通过任何渠道泄露您的个人信息，请放心输入
                </view>
                <image
                    @tap.stop="submit"
                    class="submit abs"
                    src="https://lbqny.migugu.com/admin/anmo/apply/submit.png"
                >
                </image>
            </view>
        </block>
    </view>
</template>

<script>
import wPicker from "@/components/w-picker/w-picker.vue";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
    components: {
        wPicker,
    },
    data() {
        return {
            isLoad: false,
            options: {},
            cityList: [],
            cityIndex: -1,
            storeList: [],
            storeIndex: 0,
            // -1未申请，1审核中，2审核通过，3取消授权，4审核失败(可再次申请)
            tipArr: {
                1: [
                    {
                        text: "审核成功后将直接入驻平台",
                        color: 0,
                    },
                ],
                2: [
                    {
                        text: "恭喜您，审核通过！",
                        color: 0,
                    },
                    {
                        text: "快去管理订单吧",
                        color: 0,
                    },
                ],
                3: [
                    {
                        text: "平台管理员已取消授权",
                        color: 0,
                    },
                ],
                4: [
                    {
                        text: "请联系平台管理人员询问原因",
                        color: 0,
                    },
                ],
            },
            buttonArr: {
                1: [
                    {
                        text: "个人中心",
                        type: "cancel",
                    },
                ],
                2: [
                    {
                        text: "去管理",
                        type: "confirm",
                    },
                ],
                3: [
                    {
                        text: "个人中心",
                        type: "cancel",
                    },
                ],
                4: [
                    {
                        text: "再次申请",
                        type: "confirm",
                    },
                    {
                        text: "个人中心",
                        type: "cancel",
                    },
                ],
            },
            title: {
                1: "等待审核",
                2: "您已经是" + this.$t("action.attendantName") + "了",
                3: "取消授权",
                4: "申请失败",
            },
            image: {
                1: "https://lbqny.migugu.com/admin/public/apply_wait.jpg",
                2: "https://lbqny.migugu.com/admin/public/apply_suc.jpg",
                3: "https://lbqny.migugu.com/admin/public/apply_fail.jpg",
                4: "https://lbqny.migugu.com/admin/public/apply_fail.jpg",
            },
            coach_status: -1,
            max_level: 0,
            authTime: 0,
            timer: null,
            form: {
                id: 0,
                admin_id: 0,
                partner_id: 0,
                coach_name: "", //姓名
                mobile: "", //手机号
                short_code: "",
                sex: 0, //性别
                birthday: "",
                work_time: "", //从业年份
                city_id: "", //城市
                store_id: "", //门店
                lng: "",
                lat: "",
                address: "", //详细地址
                text: "", //备注
                id_code: "", //身份证号
                id_card: [], //身份证
                license: [], //资格证书
                work_img: [], // 工作照
                self_img: [], // 生活照
                video: [],
            },
            rule: [
                {
                    name: "coach_name",
                    checkType: "isNotNull",
                    errorMsg: "输入您的姓名",
                    regType: 2,
                },
                {
                    name: "birthday",
                    checkType: "isNotNull",
                    errorMsg: "请选择您的生日",
                    regType: 2,
                },
                {
                    name: "mobile",
                    checkType: "isMobile",
                    errorMsg: "输入手机号",
                },
                {
                    name: "city_id",
                    checkType: "isNotNull",
                    errorMsg: "请选择意向工作城市",
                },
                {
                    name: "work_img",
                    checkType: "isNotNull",
                    errorMsg: "请上传工作形象照",
                },
            ],
            lockTap: false,
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        configInfo: (state) => state.config.configInfo,
        userInfo: (state) => state.user.userInfo,
        location: (state) => state.user.location,
    }),
    async onLoad(options) {
        let { admin_id = 0, partner_id = 0 } = options;
        options = admin_id || partner_id ? await this.updateCommonOptions(options) : options;
        this.options = options;
        this.form.admin_id = admin_id;
        this.form.partner_id = partner_id;

        this.$util.showLoading();
        await this.initIndex();
        let { coach_status } = this;
        uni.setNavigationBarTitle({
            title: coach_status == -1 ? `申请` + this.$t("action.attendantName") : "",
        });
        this.isLoad = true;
    },
    onUnload() {
        if (this.timer) clearInterval(this.timer);
    },
    methods: {
        ...mapActions(["getConfigInfo", "getUserInfo", "updateCommonOptions"]),
        ...mapMutations(["updateUserItem"]),
        async initIndex(refresh = false) {
            // #ifdef H5
            if (!refresh && this.$jweixin.isWechat()) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            // #endif
            if (
                !this.configInfo.id ||
                !this.configInfo.hasOwnProperty("plugAuth") ||
                (this.configInfo.hasOwnProperty("plugAuth") &&
                    !this.configInfo.plugAuth.hasOwnProperty("store")) ||
                refresh
            ) {
                await this.getConfigInfo();
            }
            await this.getCityList();

            let [data] = await Promise.all([this.$api.technician.coachInfo(), this.getStoreList()]);
            this.$util.setNavigationBarColor({
                bg: this.primaryColor,
            });
            this.max_level = data.max_level;
            if (data && !data.id) {
                this.$util.hideAll();
                return;
            }
            let imgArr = ["id_card", "license", "self_img"];
            imgArr.map((item) => {
                data[item] =
                    data[item] && data[item].length > 0
                        ? data[item].map((aitem) => {
                              return {
                                  path: aitem,
                              };
                          })
                        : [];
            });
            if (data.id_card && data.id_card.length > 1) {
                data.id_card_fan = [data.id_card[1]];
                data.id_card_people = [data.id_card[2]];
                data.id_card.splice(1, 3);
            }
            let imgArrs = ["work_img", "video"];
            imgArrs.map((item) => {
                data[item] =
                    data[item] && data[item].length > 0
                        ? [
                              {
                                  path: data[item],
                              },
                          ]
                        : [];
            });
            data.birthday = data.birthday
                ? this.$util.formatTime(data.birthday * 1000, "YY-M-D")
                : "";
            let { admin_id = 0, partner_id = 0 } = this.options;
            if (admin_id) {
                data.admin_id = admin_id;
            }
            if (partner_id) {
                data.partner_id = partner_id;
            }

            for (let key in this.form) {
                this.form[key] = data[key];
            }
            let { city_id, store_id, status, sh_text } = data;
            this.cityIndex = this.cityList.findIndex((item) => {
                return item.id == city_id;
            });
            this.storeIndex = this.storeList.findIndex((item) => {
                return item.id == store_id;
            });
            this.coach_status = !admin_id && status == 4 ? -1 : status;
            if (status == 4 && sh_text) {
                this.tipArr[4][0].text = sh_text;
            }
            this.$util.hideAll();
        },
        initRefresh() {
            this.initIndex(true);
        },
        async getCityList() {
            let { location } = this;
            if (!location.lat) {
                // #ifdef H5
                if (this.$jweixin.isWechat()) {
                    this.$util.showLoading();
                    // await this.$jweixin.initJssdk();
                    await this.$jweixin.wxReady2();
                    let { latitude: lat = 0, longitude: lng = 0 } =
                        await this.$jweixin.getWxLocation();
                    location = {
                        lng,
                        lat,
                        address: "定位失败",
                        province: "",
                        city: "",
                        district: "",
                    };
                    if (lat && lng) {
                        let key = `${lat},${lng}`;
                        let data = await this.$api.base.getMapInfo({
                            location: key,
                        });
                        let { status, result } = JSON.parse(data);
                        if (status == 0) {
                            let { address, address_component } = result;
                            let { province, city, district } = address_component;
                            location = {
                                lng,
                                lat,
                                address,
                                province,
                                city,
                                district,
                            };
                        }
                    }
                }
                // #endif
                // #ifndef H5
                location = await this.$util.getBmapLocation();
                // #endif

                this.updateUserItem({
                    key: "location",
                    val: location,
                });
            }

            let { lng = 0, lat = 0 } = location;
            if (lat && lng) {
                let city = await this.$api.base.getCity({
                    lng,
                    lat,
                });
                this.$util.hideAll();
                this.cityList = city;
                this.form.city_id = city.length > 0 ? city[0].id : 0;
            }
        },
        async getStoreList() {
            let { admin_id = 0 } = this.form;
            if (!admin_id) return;
            let data = await this.$api.mine.getStoreSelect({
                admin_id,
            });
            data.unshift({
                id: 0,
                title: "不挂靠门店",
            });
            this.storeList = data;
        },
        pickerChange(e, key) {
            let ind = e.target.value;
            if (key === "birthday") {
                let unix = this.$util.DateToUnix(ind);
                if (unix > new Date(Math.ceil(new Date().getTime())) / 1000) {
                    this.$util.showToast({
                        title: `不能选择未来时间哦`,
                    });
                    return;
                }
                this.form[key] = ind;
                return;
            }
            this[`${key}Index`] = ind;
            this.form[`${key}_id`] = this[`${key}List`][ind].id;
        },
        // 发送验证码
        async toSend() {
            let { authTime } = this;
            if (authTime) return;
            let { mobile = "" } = this.form;
            if (mobile == null || !/^(1[0-9]{10})$/.test(mobile)) {
                this.$util.showToast({
                    title: mobile == null ? `请输入手机号` : `${mobile} 手机号无效`,
                });
                return;
            }
            if (this.lockTap) return;
            this.lockTap = true;

            this.$util.showLoading();
            try {
                await this.$api.user.sendShortMsg({
                    phone: mobile,
                });
                this.$util.hideAll();
                this.lockTap = false;
                let time = 60;
                this.timer = setInterval(() => {
                    if (time === 0) {
                        clearInterval(this.timer);
                        return;
                    }
                    time--;
                    this.authTime = time;
                }, 1000);
            } catch (e) {
                setTimeout(() => {
                    this.lockTap = false;
                    this.$util.hideAll();
                }, 2000);
            }
        },
        imgUpload(e) {
            let { imagelist, imgtype } = e;
            this.form[imgtype] = imagelist;
        },
        // 选择地区
        async toChooseLocation(e) {
            await this.$util.checkAuth({
                type: "userLocation",
            });
            let { lat: locaLat = "", lng: locaLng = "" } = this.location;
            let { id = 0, lat: addrLat, lng: addrLng } = this.form;

            if (id) {
                locaLat = addrLat;
                locaLng = addrLng;
            }

            let param = {};
            if (!locaLat && !locaLng) {
                // #ifdef H5
                if (this.$jweixin.isWechat()) {
                    this.$util.showLoading();
                    await this.$jweixin.wxReady2();
                    let { latitude, longitude } = await this.$jweixin.getWxLocation();
                    locaLat = latitude;
                    locaLng = longitude;
                }
                // #endif
                // #ifdef APP-PLUS
                let location = await this.$util.getBmapLocation();
                locaLat = location.lat;
                locaLng = location.lng;
                // #endif
            }

            // #ifndef MP-WEIXIN
            param = {
                latitude: locaLat,
                longitude: locaLng,
            };
            // #endif

            let [, { address = "", longitude, latitude }] = await uni.chooseLocation(param);
            if (!address) return;
            this.form.address = address;
            this.form.lng = longitude;
            this.form.lat = latitude;
        },
        // 去管理/再次申请
        async confirm() {
            let { coach_status } = this;
            if (coach_status == 4) {
                this.coach_status = -1;
                uni.setNavigationBarTitle({
                    title: this.$t("action.attendantName"),
                });
                return;
            }
            this.$util.goUrl({
                url: `/pages/mine?type=2`,
                openType: `reLaunch`,
            });
        },
        //表单验证
        validate(param) {
            let validate = new this.$util.Validate();
            this.rule.map((item) => {
                let { name } = item;
                validate.add(param[name], item);
            });
            let message = validate.start();
            return message;
        },
        async submit() {
            let param = this.$util.deepCopy(this.form);
            param.work_img = param.work_img.length > 0 ? param.work_img[0].path : "";
            let msg = this.validate(param);
            if (msg) {
                this.$util.showToast({
                    title: msg,
                });
                return;
            }
            let { short_code_status } = this.configInfo;
            if (short_code_status && (param.short_code == null || param.short_code.length != 6)) {
                this.$util.showToast({
                    title: `请输入6位数短信验证码`,
                });
                return;
            }
            if (!short_code_status) {
                delete param.short_code;
            }
            param.birthday = this.$util.DateToUnix(param.birthday);
            if (this.lockTap) return;
            this.lockTap = true;

            this.$util.showLoading();
            try {
                await this.$api.technician.coachApply(param);
                this.$util.hideAll();
                this.$util.showToast({
                    title: `提交成功，即将跳转个人中心`,
                });
                if (this.timer) {
                    clearInterval(this.timer);
                }
                setTimeout(() => {
                    if (getCurrentPages().length > 1) {
                        this.$util.back();
                    }
                    this.$util.goUrl({
                        url: "/pages/mine",
                        openType: `reLaunch`,
                    });
                }, 2000);
            } catch (e) {
                setTimeout(() => {
                    this.lockTap = false;
                    this.$util.hideAll();
                }, 2000);
            }
        },
    },
};
</script>

<style lang="scss">
.apply-info-box {
    width: 100%;
    height: 2050rpx;

    .bg-1 {
        width: 750rpx;
        height: 1999rpx;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .bg-2 {
        width: 750rpx;
        height: 620rpx;
        top: 30rpx;
        z-index: 2;
    }

    .technician-money {
        width: 45rpx;
        top: 355rpx;
        left: 460rpx;
        z-index: 3;
    }

    .join-us {
        width: 668rpx;
        height: 1351rpx;
        top: 468rpx;
        left: 44rpx;
        z-index: 2;

        .item-input {
            height: 74rpx;
            border: 4rpx solid #069f5e;

            .flex-between {
                height: 74rpx;
            }
        }

        .item-input.text {
            height: 82rpx;
        }
    }

    .submit {
        width: 662rpx;
        height: 93rpx;
        top: 1900rpx;
        left: 47rpx;
        z-index: 2;
    }
}
</style>
